<template>
  <div class="t_settlement_main">
    <div class="t_main_header">
      <lay-card
        v-for="pay in payMthods"
        :key="pay.id"
        @click="selectedPayMethod(pay)"
      >
        <div class="t_main_header_item_icon">
          <svg-icon :name="pay.icon" :size="'1.5rem'"></svg-icon>
        </div>
        <div>{{ pay.name }}</div>
      </lay-card>
    </div>
    <div class="t_main_content header">
      <!--左侧支付列表-->
      <div class="t_main_content_left">
        <div class="left_header">
          <lay-row>
            <lay-col md="12">付款方式</lay-col>
            <lay-col md="12">付款金额</lay-col>
          </lay-row>
        </div>

        <div class="left_content">
          <lay-row
            v-for="item in settlementList"
            :key="item.id"
            @click="selectSettlment(item)"
          >
            <lay-col md="12">
              <svg-icon :name="item.icon" :size="'1rem'"></svg-icon>
              <span style="margin-left: 5px">{{ item.name }}</span>
            </lay-col>
            <lay-col md="12"
              ><span style="margin-right: 5px">{{ item.amount }}</span
              ><svg-icon :name="'rmb'" :size="'1rem'"></svg-icon
            ></lay-col>
          </lay-row>
        </div>
      </div>
      <!--右侧支付按钮-->
      <div class="t_main_content_right">
        <div class="right_header">
          <lay-row>
            <lay-col md="12">
              <div class="t_title">应收款:</div>
              <div class="t_content" style="color: red">
                {{ paymentInfo.receivable }}
              </div>
            </lay-col>
            <lay-col md="12">
              <div class="t_title">已收款:</div>
              <div class="t_content" style="color: #4dd44d">
                {{ paymentInfo.received }}
              </div>
            </lay-col>
          </lay-row>
          <lay-row>
            <lay-col md="12">
              <div class="t_title">待收款:</div>
              <div class="t_content" style="color: red">
                {{ pendingPaymentComp }}
              </div>
            </lay-col>
            <lay-col md="12">
              币种：
              <h3>人民币</h3>
            </lay-col>
          </lay-row>
        </div>

        <div class="right_content">
          <numberKeyboard :paymentInfo="paymentInfo" :dbInfo="props.dbInfo"></numberKeyboard>
        </div>
      </div>
    </div>
    <lay-layer
      v-model="payMethodLayer"
      :shade="false"
      :area="['400px', '400px']"
      :title="payMethodTitle"
      :beforeClose="beforeCloseMethod"
    >
      <div class="t_pay_main">
        <div class="t_pay_main_header">
          <lay-row>
            <lay-col md="6">应付金额：</lay-col>
            <lay-col md="12">
              <lay-input v-model="payAmountShow" placeholder="0.00"></lay-input>
            </lay-col>
          </lay-row>
          <lay-row>
            <lay-col md="6">付款码：</lay-col>
            <lay-col md="12">
              <lay-input v-model="paymentCode" :disabled="true"></lay-input>
            </lay-col>
          </lay-row>
        </div>

        <div class="t_pay_main_content">
          <div class="keyboard-num">
            <div
              class="keyboard-num-item"
              v-for="item in btnList"
              :key="item.key"
            >
              <lay-button type="default" @click="clickBtn(item)">{{
                item.value
              }}</lay-button>
            </div>
          </div>
          <div class="keyboard-option">
            <div class="keyboard-option-item">
              <lay-button type="warm" @click="clickBtn({ key: 'back' })"
                >退格</lay-button
              >
            </div>
            <div class="keyboard-option-item">
              <lay-button type="danger" @click="beforeCloseMethod"
                >退出</lay-button
              >
            </div>
            <div class="keyboard-option-item">
              <lay-button type="primary" @click="beforeCloseMethod"
                >确定</lay-button
              >
            </div>
          </div>
        </div>
      </div>
    </lay-layer>
  </div>
</template>
<script setup>
import { layer } from "@layui/layui-vue";
import { ref, onMounted, computed, watch } from "vue";
import XEUtils from "xe-utils";
import numberKeyboard from "./components/numberKeyboard.vue";
import { getOrder } from "@/apis/cashierApi";

const props = defineProps({
  orderInfo: {
    type: Array,
    default: () => [],
  },
  dbInfo: {
    type: Object,
    default: () => {},
  },
});

//定义参数
const payAmount = ref(0); //支付金额
const payAmountShow = ref(null); //支付金额

const paymentCode = ref("12312312312312313"); //支付码

//支付方式
const payMthods = ref([
  {
    id: 9,
    name: "现金",
    sign: "xj",
    icon: "xjzf",
    desc: "现金",
  },
  {
    id: 2,
    name: "支付宝",
    sign: "zfb",
    icon: "zfbzf",
    desc: "支付宝",
  },
  {
    id: 3,
    name: "微信",
    sign: "wx",
    icon: "wxzf",
    desc: "微信",
  },
  {
    id: 4,
    name: "银联",
    sign: "yl",
    icon: "xykzf",
    desc: "银联",
  },
  {
    id: 5,
    name: "储值卡",
    sign: "czk",
    icon: "czkzf",
    desc: "储值卡",
  },
  {
    id: 6,
    name: "购物券",
    sign: "gwq",
    icon: "gwqzf",
    desc: "",
  },
  {
    id: 8,
    name: "云支付",
    sign: "yzf",
    icon: "yzfzf",
    desc: "描述",
  },
]);

//支付列表
const settlementList = ref([
  {
    id: 1,
    name: "现金",
    amount: 33,
    icon: "xjzf",
    desc: "描述",
  },
  {
    id: 2,
    name: "支付宝",
    amount: 13.9,
    icon: "zfbzf",
    desc: "描述",
  },
  {
    id: 3,
    name: "微信",
    amount: 9.9,
    icon: "wxzf",
    desc: "描述",
  },
]);

//数字键盘
const btnList = ref([
  { key: 7, value: "7" },
  { key: 8, value: "8" },
  { key: 9, value: "9" },
  { key: 4, value: "4" },
  { key: 5, value: "5" },
  { key: 6, value: "6" },
  { key: 1, value: "1" },
  { key: 2, value: "2" },
  { key: 3, value: "3" },
  { key: "clear", value: "清除" },
  { key: 0, value: "0" },
  { key: ".", value: "." },
]);
//支付弹框
const payMethodLayer = ref(false);
//支付弹框标题
const payMethodTitle = ref("支付宝");

//支付详情
const paymentInfo = ref({
  receivable: 0, //应收
  received: 0, //已收
  pendingPayment: 0, //待收
});

//关闭之前调用方法
const beforeCloseMethod = () => {
  layer.msg("取消支付");
  return true;
};

//查看支付详情
const selectSettlment = (item) => {
  console.log(item);
};

//选择其他支付弹窗
const selectedPayMethod = (item) => {
  console.log(item);
  if (item.sign == "xj") {
    return;
  }
  payMethodTitle.value = item.name + "支付";
  payMethodLayer.value = true;
};

//点击数字键盘事件
const clickBtn = (item) => {
  let num = payAmount.value == 0 ? "" : payAmount.value.toString();
  //删除一个数子
  if (item.key === "clear") {
    num = "0";
  } else if (item.key === "back") {
    if (num.length > 0) {
      num = num.slice(0, -1);
    }
  } else if (item.key == ".") {
    //只能有一个小数点
    if (num.indexOf(".") === -1) {
      num += ".";
    }
  } else {
    //点击的数字
    num += item.value;
  }
  console.log(num);
  if (num.indexOf(".") != -1) {
    num.split(".")[1].length > 2
      ? (num = num.slice(0, num.indexOf(".") + 3))
      : num;
  }
  payAmount.value = num;
};

//格式化金额方法
const formartMoney = (value) => {
  //格式化金额
  const num = XEUtils.toNumber(value);
  payAmountShow.value = XEUtils.commafy(XEUtils.floor(num, 2), { digits: 2 });
};

//初始化页面数据
const initPage = async () => {
  const { code, db, msg } = await getOrder({ dbid: props.dbInfo.dbid });
  console.log("initpage-->", code, db, msg);
  if (code == 200) {
    //计算价格
    //计算实际总价
    paymentInfo.value.receivable = XEUtils.sum(
      db.goods_db,
      "prc_sale_actual_sum"
    );
    payAmount.value = XEUtils.subtract(
      paymentInfo.value.receivable,
      paymentInfo.value.received
    );
  } else {
    layer.msg(msg);
  }

  // const orderInfo = props.orderInfo;
  // paymentInfo.value.receivable = XEUtils.sum(orderInfo, "amount"); // 99
  // payAmount.value = XEUtils.subtract(
  //   paymentInfo.value.receivable,
  //   paymentInfo.value.received
  // );
};

const pendingPaymentComp = computed(() => {
  const num = XEUtils.subtract(
    paymentInfo.value.receivable,
    paymentInfo.value.received
  );
  paymentInfo.value.pendingPayment = num;
  return num;
});

watch(payAmount, (value) => {
  if (value) {
    formartMoney(value);
  } else {
    payAmount.value = 0;
    payAmountShow.value = null;
  }
});

onMounted(() => {
  console.log("111", props.orderInfo, props.dbInfo.dbid);
  initPage();
});
</script>

<style lang="less" scoped>
.t_settlement_main {
  padding: 5px;
  .t_main_header {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    .layui-card {
      margin: 0;
      .t_main_header_item_icon {
        text-align: center;
      }
    }
  }
  .t_main_content {
    height: 450px;
    width: 100%;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .t_main_content_left {
      width: 240px;
      height: 100%;
      .left_header {
        height: 40px;
        width: 100%;
        background: #ffbca7;
        .layui-row {
          text-align: center;
          line-height: 40px;
        }
      }
      .left_content {
        height: calc(100% - 40px);
        width: 100%;
        overflow-y: auto;
        background: #eee;
        .layui-row {
          text-align: center;
          height: 32px;
          line-height: 32px;
          border-bottom: 1px solid #c7bdbd;
          .layui-col {
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
    .t_main_content_right {
      width: calc(100% - 248px);
      height: 100%;
      // background: #e7d3d3;
      .right_header {
        width: 100%;
        height: 100px;
        background: #ffbca7;
        .layui-row {
          height: 50%;
          width: 100%;
          .layui-col {
            height: 100%;
            display: flex;
            align-items: center;
            .t_title {
              width: 35%;
              text-align: end;
              font-size: 20px;
              font-weight: 600;
              font-family: fangsong;
            }
            .t_content {
              box-sizing: border-box;
              padding-left: 10px;
              width: 60%;
              height: 26px;
              font-size: 24px;
              background: #eee;
              font-weight: 600;
            }
          }
        }
      }
      .right_content {
        width: 100%;
        height: calc(100% - 100px);
        padding-top: 20px;
        box-sizing: border-box;
      }
    }
  }
}
.t_pay_main {
  width: 100%;
  height: 340px;
  .t_pay_main_header {
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: #f6f6f6;
    .layui-row {
      display: flex;
      justify-content: center;
      align-items: center;
      .layui-col {
        text-align: end;
      }
      .layui-col :deep(.layui-input .layui-input-wrapper input) {
        text-align: end;
        padding-right: 20px;
      }
    }
  }
  .t_pay_main_content {
    width: 100%;
    height: calc(100% - 100px);
    display: flex;
    justify-content: space-around;
    .keyboard-num {
      width: 65%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      .keyboard-num-item {
        width: 33.33%;
        display: flex;
        justify-content: center;
        align-items: center;
        button {
          width: 80px;
          height: 50px;
          background: #fff;
          border-radius: 10px;
        }
      }
    }
    .keyboard-option {
      width: 25%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      .keyboard-option-item {
        width: 100%;
        height: 50px;
        display: flex;
        button {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }
      .keyboard-option-item:last-child {
        height: 110px;
      }
    }
  }
}

::-webkit-scrollbar {
  width: 3px; /* 控制横向滚动条的宽度 */
  height: 8px; /* 控制纵向滚动条的高度 */
}

::-webkit-scrollbar-thumb {
  background-color: #ffbca7; /* 滑块的颜色 */
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5; /* 滚动条背景色 */
}
</style>
